<template>
  <div>
    <el-table :data="list" element-loading-text="Loading" fit highlight-current-row size="medium">
      <el-table-column label="选项名称" prop="optionName" width="300">
        <template #default="scope">
          <span>{{ scope.row.optionName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="选项值">
        <template #default="scope">
          <span style="color: #999;font-size: 13px">{{ scope.row.optionValue }}</span>
        </template>
      </el-table-column>
      <el-table-column label="选项组">
        <template #default="scope">
          <span style="color: #999;font-size: 13px">{{ scope.row.optionGroup }}</span>
        </template>
      </el-table-column>
      <el-table-column label="顺序">
        <template #default="scope">
          <span style="color: #999;font-size: 13px">{{ scope.row.sort }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template v-if="checkPermission('course:admin:options:edit')" #default="scope">
          <el-button type="primary" @click="handleUpdateRow(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <options-edit v-if="optionsEditCtr.visible" :form-data="optionsEditCtr.info" :title="optionsEditCtr.title" :visible="optionsEditCtr.visible" :width="optionsEditCtr.width" @close-callback="closeCallback"/>
  </div>
</template>

<script>
import {optionsEdit} from '@/api/options';
import OptionsEdit from './edit.vue';

export default {
  components: {OptionsEdit},

  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  watch: {
    list(val) {
      this.trigger = false;
      if (val) {
        setTimeout(() => {
          this.trigger = true;
        }, 500);
      }
    }
  },
  data() {
    return {
      optionsEditCtr: {
        width: '65%',
        trigger: false,
        title: undefined,
        visible: false,
        info: {}
      },
      sysConfigValueCtr: {
        title: '查看配置',
        value: undefined,
        visible: false
      }
    };
  },
  mounted() {
  },
  methods: {
    handleUpdateRow(row) {
      // 配置类型(1:文本;2:富文本,3图片,4布尔,5枚举)
      this.optionsEditCtr.title = row.optionName;
      this.optionsEditCtr.info = row;
      this.optionsEditCtr.visible = true;
      if (row.contentType === 1) {
        this.optionsEditCtr.width = '40%';
      } else if (row.contentType === 2) {
        this.optionsEditCtr.width = '80%';
      } else if (row.contentType === 3) {
        this.optionsEditCtr.width = '400px';
      } else {
        this.optionsEditCtr.width = '40%';
      }
    },
    closeCallback(val) {
      this.optionsEditCtr.visible = false;
      this.sysConfigValueCtr.visible = false;
      if (val) {
        this.$emit('reset');
      }
    }
  }
};
</script>

<style lang="scss" type="text/css">
.tips {
  padding: 5px;
}

.list_avatar {
  height: 50px;
}
</style>
